<template>
	<div class="mainRight">
		<el-form
			ref="ruleForm"
			class="ruleForm"
			:model="ruleForm"
			label-width="80px"
			inline
		>
			<el-form-item label="类别:">
				<el-select v-model="ruleForm.typeId" placeholder="请选择">
					<el-option
						v-for="item in typeList"
						:key="item.id"
						:label="item.configname"
						:value="item.id"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="状态:">
				<el-select v-model="value" clearable placeholder="请选择">
					<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="积分类型:">
				<el-select v-model="value" clearable placeholder="请选择">
					<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<div
			style="
				margin-bottom: 24px;
				display: flex;
				justify-content: space-between;
			"
		>
			<el-button
				:disabled="!pointsForm.pid"
				type="primary"
				icon="el-icon-plus"
				size="mini"
				@click="dialogVisible = true"
				>新增</el-button
			>
			<div style="display: flex">
				<el-button size="mini">重置</el-button>
				<el-button type="primary" size="mini">查询</el-button>
			</div>
		</div>
		<el-alert
			title="自动积分规则为系统设置的积分规则，申报积分规则租户管理员可自主设置积分项，可通过启动和禁用控制积分规则展示，已设置的申报积分项不可再次编排积分内容，已经确认的积分记录保留。"
			type="warning"
			show-icon
			:closable="false"
		>
		</el-alert>
		<el-table
			:data="list"
			style="width: 100%"
			v-loading="loading"
			row-key="label_id"
			:tree-props="{ children: 'childlist', hasChildren: 'hasChildren' }"
		>
			<el-table-column label="分类" align="left" width="600">
				<template slot-scope="{ row }">{{
					row.name ? row.name : row.title
				}}</template>
			</el-table-column>
			<el-table-column label="分制" align="center">
				<template slot-scope="{ row }">
					{{ row.bouns == 1 ? '加分' : row.bouns == 0 ? '减分' : '' }}
				</template>
			</el-table-column>
			<el-table-column prop="basisscore" label="基本分" align="center">
			</el-table-column>
			<el-table-column prop="highscore" label="最高分" align="center">
			</el-table-column>
			<el-table-column label="周期" align="center">
				<template slot-scope="{ row }">
					{{
						row.cycle == 1
							? '月度'
							: row.cycle == 2
							? '季度'
							: row.cycle == 3
							? '月度'
							: row.cycle == 4
							? '年度'
							: ''
					}}
				</template>
			</el-table-column>

			<el-table-column label="状态" align="center">
				<template slot-scope="{ row }">
					<div
						style="
							display: flex;
							align-items: center;
							justify-content: center;
						"
					>
						<span
							style="
								width: 6px;
								height: 6px;
								border-radius: 50%;
								margin-right: 7px;
								display: inline-block;
							"
							:style="{
								'background-color':
									row.childlist && row.childlist.length > 0
										? 'transparent'
										: row.status == 0
										? '#f5222d'
										: row.status == 1
										? '#52c41a'
										: '',
							}"
						></span>
						{{
							row.childlist && row.childlist.length > 0
								? ''
								: row.status == 1
								? '启用'
								: row.status == 0
								? '停用'
								: ''
						}}
					</div>
				</template>
			</el-table-column>
			<el-table-column label="积分类型" align="center">
				<template slot-scope="{ row }">
					{{
						row.scoretype == 1
							? '自动积分'
							: row.scoretype == 2
							? '申报积分'
							: ''
					}}
				</template>
			</el-table-column>

			<el-table-column label="操作" align="center" width="200">
				<template slot-scope="{ row }">
					<div style="display: flex; align-items: center">
						<el-button
							type="text"
							class="color-gray"
							@click="handleItem(1, row)"
							>编辑</el-button
						>
						<el-divider direction="vertical"></el-divider>
						<el-button
							type="text"
							class="color-gray"
							@click="handleItem(2, row)"
							>删除</el-button
						>
						<template v-if="row.childlist">
							<el-divider direction="vertical"></el-divider>
							<el-button
								type="text"
								class="color-gray"
								@click="handleItem(3, row)"
								>新增规则</el-button
							>
						</template>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog
			:title="title"
			:visible.sync="dialogVisible"
			width="600px"
			@close="cancelPoints"
		>
			<el-form
				:model="pointsForm"
				:rules="rules"
				ref="pointsForm"
				label-width="100px"
				class="pointsForm"
			>
				<el-form-item label="积分分类" prop="name">
					<el-input
						v-model="pointsForm.name"
						placeholder="请输入积分分类"
					></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelPoints">取 消</el-button>
				<el-button type="primary" @click="pointsSubmit('pointsForm')"
					>确 定</el-button
				>
			</span>
		</el-dialog>
		<el-dialog
			:title="ruleTitle"
			:visible.sync="ruleDialogVisible"
			width="1000px"
			@close="cancelForm"
		>
			<el-form
				:model="form"
				:rules="rules"
				ref="forms"
				label-width="120px"
				class="form"
			>
				<el-row>
					<el-col :span="12">
						<el-form-item label="积分类型:" prop="scoretype">
							<el-radio v-model="form.scoretype" :label="1"
								>自动积分</el-radio
							>
							<el-radio v-model="form.scoretype" :label="2"
								>申报积分</el-radio
							>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="分类:" prop="name">
							<el-input
								disabled
								v-model="form.name"
								placeholder="请输入积分分类"
							></el-input> </el-form-item
					></el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="积分类型:" prop="bouns">
							<el-radio v-model="form.bouns" :label="1"
								>加分</el-radio
							>
							<el-radio v-model="form.scoretype" :label="0"
								>减分</el-radio
							>
						</el-form-item></el-col
					>
				</el-row>
				<el-row>
					<el-col :span="12"
						><el-form-item label="基本分:" prop="basisscore">
							<el-input-number
								v-model="form.basisscore"
								controls-position="right"
								:min="0"
								placeholder="请输入基本分"
							></el-input-number> </el-form-item
					></el-col>
					<el-col :span="12"
						><el-form-item label="最高分:" prop="highscore">
							<el-input-number
								v-model="form.highscore"
								controls-position="right"
								:min="0"
								placeholder="请输入最高分"
							></el-input-number> </el-form-item
					></el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="每日积分上限:" prop="scoredayup">
							<el-input-number
								v-model="form.scoredayup"
								controls-position="right"
								:min="0"
								placeholder="请输入每日积分上限"
							></el-input-number> </el-form-item
					></el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="周期:" prop="cycle">
							<el-select
								v-model="form.cycle"
								placeholder="请选择周期"
							>
								<el-option label="月度" :value="1"> </el-option>
								<el-option label="季度" :value="2"> </el-option>
								<el-option label="半年" :value="3"> </el-option>
								<el-option label="年度" :value="4"> </el-option>
							</el-select> </el-form-item
					></el-col>
					<el-col :span="12">
						<el-form-item label="状态:">
							<el-radio v-model="form.status" :label="1"
								>启用</el-radio
							>
							<el-radio v-model="form.status" :label="0"
								>停用</el-radio
							>
						</el-form-item></el-col
					>
				</el-row>

				<el-row>
					<el-col :span="24">
						<el-form-item label="内容:" prop="title">
							<el-input
								type="textarea"
								:rows="4"
								v-model="form.title"
								placeholder="请输入内容"
							></el-input> </el-form-item
					></el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelForm">取 消</el-button>
				<el-button type="primary" @click="ruleSubmit('form')"
					>确 定</el-button
				>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { getConfigList } from '@/api/setting'
import {
	addScore,
	editScore,
	getScoreList,
	scoretypelist,
	addscoretype,
	editscoretype,
	deletescoretype,
} from '@/api/party'
export default {
	data() {
		return {
			title: '积分分类新增',
			loading: true,
			ruleTitle: '',
			dialogVisible: false,
			ruleDialogVisible: false,
			list: [],
			ruleForm: {
				typeId: '',
				pageNum: 1,
				pageSize: 10,
				total: 0,
			},
			rules: {
				name: [
					{
						required: true,
						message: '请输入积分分类',
						trigger: 'blur',
					},
				],

				title: [
					{ required: true, message: '请输入内容', trigger: 'blur' },
				],
				cycle: [
					{
						required: true,
						message: '请选择周期',
						trigger: 'change',
					},
				],
				highscore: [
					{
						required: true,
						message: '请输入最高分',
						trigger: 'blur',
					},
				],
				basisscore: [
					{
						required: true,
						message: '请输入基本分',
						trigger: 'blur',
					},
				],
				bouns: [
					{
						required: true,
						message: '请选择积分类型',
						trigger: 'change',
					},
				],
			},
			form: {
				id: '',
				name: '',
				typeid: '',
				title: '',
				bouns: '',
				basisscore: '',
				highscore: '',
				cycle: '',
				status: 1,
				scoretype: 1,
				scoredayup: '',
			},
			pointsForm: {
				id: null,
				name: '',
				pid: '',
			},
			typeList: [], //类别
			// 待删除字段

			value: '',
			radio: '',
			options: [],
		}
	},
	methods: {
		cancelForm() {
			this.form.id = null
			this.ruleDialogVisible = false

			this.form.typeid = ''
			this.form.bouns = ''
			this.form.basisscore = ''
			this.form.highscore = ''
			this.form.cycle = ''
			this.form.status = ''
			this.form.scoretype = ''
			this.form.scoredayup = ''
			this.form.name = ''
			this.form.title = ''
		},
		cancelPoints() {
			this.dialogVisible = false
			this.pointsForm.id = ''
			this.pointsForm.name = ''
		},
		ruleSubmit(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					let api = this.form.id
						? editScore(this.form)
						: addScore(this.form)
					api.then((res) => {
						this.loading = true
						this.$modal.msgSuccess(res.msg)
						this.ruleDialogVisible = false
						this.form.id = ''
						this.getList()
					})
				} else {
					return false
				}
			})
		},
		handleItem(type, item) {
			if (type == 1) {
				if (item.childlist) {
					this.title = '积分分类修改'
					this.pointsForm.id = item.id
					this.pointsForm.name = item.name
					this.dialogVisible = true
				} else {
					this.ruleTitle = '积分内容修改'
					this.form.id = item.id
					this.form.typeid = item.typeid
					this.form.bouns = item.bouns
					this.form.basisscore = item.basisscore
					this.form.highscore = item.highscore
					this.form.cycle = item.cycle
					this.form.status = item.status
					this.form.scoretype = item.scoretype
					this.form.scoredayup = item.scoredayup
					this.form.name = item.typename
					this.form.title = item.title
					this.ruleDialogVisible = true
				}
			} else if (type == 2) {
				this.$confirm(`确定删除 ${item.name} 吗？`, '删除积分类型', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				})
					.then(() => {
						deletescoretype({ id: item.id }).then((res) => {
							this.loading = true
							this.$modal.msgSuccess(res.msg)

							this.getList()
						})
					})
					.catch(() => {})
			} else {
				this.ruleTitle = '积分内容新增'
				this.form.typeid = item.id
				this.form.name = item.name
				this.ruleDialogVisible = true
			}
		},
		handleChange() {},
		// 积分分类添加
		pointsSubmit(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					let api = this.pointsForm.id
						? editscoretype(this.pointsForm)
						: addscoretype(this.pointsForm)
					api.then((res) => {
						this.loading = true
						this.pointsForm.name = ''
						this.pointsForm.id = ''
						this.$modal.msgSuccess(res.msg)
						this.dialogVisible = false

						this.getList()
					})
				} else {
					return false
				}
			})
		},
		//切换分页
		handleCurrentChange(val) {
			this.loading = true
			this.ruleForm.pageNum = val
		},
		//切换总条数
		handleSizeChange(val) {
			this.loading = true
			this.ruleForm.pageSize = val
		},
		getList() {
			getScoreList().then((res) => {
				this.loading = false
				this.list = res.data
			})
		},
		getConfigList() {
			getConfigList({ configflag: 'gongzuojifenleibie' }).then((res) => {
				this.typeList = res.data
				if (res.data.length) {
					this.ruleForm.typeId = res.data[0].id
					this.pointsForm.pid = res.data[0].id
				}
			})
		},
	},
	created() {
		this.getList()
		this.getConfigList()
	},
}
</script>

<style lang="scss" scoped>
.color-gray {
	color: #a0a2ad;
}
.ruleForm {
	margin-bottom: 14px;
	::v-deep .el-form-item {
		width: 32.5%;
		// margin-right: 0;
		margin-bottom: 10px;
	}
	::v-deep .el-form-item__content {
		width: calc(100% - 80px);
		.el-select {
			width: 100%;
		}
	}
}
</style>
